<template>

  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>{{classlistName}}</span>
      <router-link style="float: right; padding: 3px 0" :to="{path: url,query: {classlistId: classlistId, name: classlistName, siteId: siteId}}">
        <a href="javascript:void(0);">更多</a>
      </router-link>
    </div>
    <div v-for="item in newsList" :key="item.id" class="text item">
        <p><a href="javascript:void(0);" @click="goToInfo(item)" :title="item.name">{{subText(item.name,30)}}</a></p>
    </div>
  </el-card>
    <!-- <div class="blogs">
      <el-row>
        <el-col :span="12"><h3 class="blogtitle">{{classlistName}}</h3></el-col>
        <el-col :span="12">

        </el-col>
      </el-row>
      <ul class="sidenews">
        <li v-for="item in newsList" :key="item.id">
          <p><a href="javascript:void(0);" @click="goToInfo(item)">{{item.name}}</a></p>
        </li>
      </ul>
    </div> -->
</template>


<script>
import { getNewsByClasslistId } from "../../api/index";
import {getBlogByUid} from "../../api/blogContent";
export default {
  props: {
      classlistId: {
         type: Number
      },
      classlistName: {
        type: String
      },
      url: {
        type: String
      }
  },
  name: "newsPart",
  data() {
    return {
      classlistInfo: {}, //栏目信息
      newsList: [], //新闻列表
      hotBlogData: [], //热门博客列表
      siteId: this.$store.state.app.siteId
    };
  },
  created() {
    this.getNewsByClasslistId();
  },
  computed: {
    //添加一个计算属性用于简单过滤掉数组中第一个数据
    sideNews() {
      return this.hotBlogData.filter(blog =>
        this.hotBlogData.indexOf(blog) != 0
      )
    }
  },
  methods: {
    getNewsByClasslistId(){
      getNewsByClasslistId(this.classlistId).then(response => {
        if (response.code == this.$ECode.SUCCESS) {
          this.newsList = response.data.records;
        }
      });
    },
    //跳转到文章详情【或推广链接】
    goToInfo(item) {
      let routeData = this.$router.resolve({
          path: "/info",
          query: {id: item.id, classlistId: item.classlistId, siteId: this.siteId}
        });
      window.open(routeData.href, '_self');
    },
    //切割字符串
    subText: function(str, index) {
        if (str.length < index) {
            return str;
        }
        return str.substring(0, index) + "...";
    }
  }
};
</script>

<style>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
      width: 480px;
      height: 500px;
      margin-bottom: 30px;
  }
</style>
